<template>
  <div class="detail">
    <div class='czInfo'>
      <div>备案信息</div>
    </div>
    <van-form>
      <van-field autosize readonly input-align="right"
        label="驾驶员姓名"
        v-if="formData.driver_name"
        v-model="formData.driver_name"
      />
      <van-field autosize readonly input-align="right"
        label="驾驶员身份证号"
        v-if="formData.driver_cardno"
        v-model="formData.driver_cardno"
      />
      <van-field autosize readonly input-align="right"
        label="驾驶员手机号码"
        v-if="formData.driver_tel"
        v-model="formData.driver_tel"
      />
      <div class='field'>
        <div class='label'>是否途经风险地区</div>
        <div class='text'>
          <div :class="{'icon': formData.quguo_high_risk == '1', 'icon1': formData.quguo_high_risk == '2'}"></div>
          <div :class="{'value': formData.quguo_high_risk == '1', 'value1': formData.quguo_high_risk == '2'}">
            {{ formData.quguo_high_risk == '1' ? '未途经' : formData.quguo_high_risk == '2' ? '途经' : formData.quguo_high_risk == '3' ? '未查询到行程记录' : ''}}
          </div>
        </div>
      </div>
      <div class="promptView" v-show="formData.quguo_high_risk == '2'">
          您14天内到达或途经过中高风险地区所在城市
          (不表示实际到访过这些中高风险地区)
        </div>
      <van-field autosize readonly input-align="right"
                 label="最新核酸检测结果"
                 v-model="formData.hesuan_result1"
      />
      <!--<van-field autosize readonly input-align="right"-->
      <!--           label="车辆类别"-->
      <!--           v-model="formData.cheliang_type_name"-->
      <!--/>-->
      <van-field autosize readonly input-align="right"
        label="车牌号码"
        v-if="formData.car_number"
        v-model="formData.car_number"
      />
      <van-field autosize readonly input-align="right"
                 label="车牌颜色"
                 v-model="formData.chepai_color_name"
      />
      <!--<van-field autosize readonly input-align="right"-->
      <!--           label="车体颜色"-->
      <!--           v-model="formData.car_color"-->
      <!--/>-->
      <!-- <van-field autosize readonly input-align="right"
                 label="运输证号"
                 v-model="formData.dlys_no"
      /> -->
      <!-- <van-field autosize readonly input-align="right"
        label="道路运输"
        v-if="formData.dlys"
        v-model="formData.dlys"
      /> -->
      <!--<van-field v-if="formData.car_is_ll" readonly  input-align="right" name="radio" label="冷链车辆">-->
      <!--  <template #input>-->
      <!--    <van-radio-group disabled v-model="formData.car_is_ll" direction="horizontal">-->
      <!--      <van-radio name="1" >是</van-radio>-->
      <!--      <van-radio name="2" >否</van-radio>-->
      <!--    </van-radio-group>-->
      <!--  </template>-->
      <!--</van-field>-->
      <!-- <van-field autosize readonly input-align="right"
                 label="从业证号"
                 v-model="formData.people_cy_no"
      /> -->
      <van-field autosize readonly input-align="right"
                 label="出发地"
                 v-model="formData.origin"
      />
      <van-field autosize readonly input-align="right"
                 label="来返沈时间"
                 v-model="formData.arrive_time"
      />
      <van-field autosize readonly input-align="right"
                 label="在沈时间"
                 v-model="formData.zssj_name"
      />
      <van-field autosize readonly input-align="right"
                 label="来返沈住址"
                 v-if="formData.zssj_name == '在沈过夜'"
                 v-model="formData.arrive_address"
      />
      <!-- <van-field autosize readonly input-align="right"
                 label="途经地"
                 v-model="formData.tjd"
      /> -->
      <van-field input-align="right"
                 label="到沈区域"
                 readonly
                 name="pattern"
                 v-model="formData.dsqName"
      />
      <div class='czInfo'>
        <div>货主信息</div>
      </div>
      <div v-for="(item,index) in formData.goodsList" :key="index">
        <!-- <van-field autosize readonly input-align="right"
        :label="'物品名称'+(index+1)"
        v-if="formData.goodsList[index].goods_name"
        v-model="formData.goodsList[index].goods_name"
      /> -->
      <!-- <van-field autosize readonly input-align="right"
        :label="'装货地点'+(index+1)"
        v-if="formData.goodsList[index].goods_pretend"
        v-model="formData.goodsList[index].goods_pretend"
      /> -->
        <!-- <van-field autosize readonly input-align="right"
                   :label="'卸货区'+(index+1)"
                   v-if="formData.goodsList[index].ascription_code_name"
                   v-model="formData.goodsList[index].ascription_code_name"
        /> -->
      <!-- <van-field autosize readonly input-align="right"
        :label="'卸货地点'+(index+1)"
        v-if="formData.goodsList[index].goods_discharge"
        v-model="formData.goodsList[index].goods_discharge"
      /> -->
        <van-field autosize readonly input-align="right"
                   :label="'收发货单位'+(index+1)"
                   v-if="formData.goodsList[index].receiving_dw"
                   v-model="formData.goodsList[index].receiving_dw"
        />
      <!-- <van-field autosize readonly input-align="right"
        :label="'物品卸货时间'+(index+1)"
        v-if="formData.goodsList[index].goods_discharge_time"
        v-model="formData.goodsList[index].goods_discharge_time"
      /> -->
      <van-field autosize readonly input-align="right"
        :label="'收发货人姓名'+(index+1)"
        v-if="formData.goodsList[index].receiving_name"
        v-model="formData.goodsList[index].receiving_name"
      />
      <van-field autosize readonly input-align="right"
        :label="'收发货人手机号码'+(index+1)"
        v-if="formData.goodsList[index].receiving_tel"
        v-model="formData.goodsList[index].receiving_tel"
      />
      </div>
      <div class='czInfo'>
        <div>同行信息</div>
      </div>
      <div v-for="(item,index) in formData.peerList" :key="index+'p'">
        <van-field autosize='' readonly input-align="right"
                   :label="'同行人姓名'+(index+1)"
                   v-model="formData.peerList[index].passenger_name"
        />
        <van-field autosize readonly input-align="right"
          :label="'同行人身份证号'+(index+1)"
          v-model="formData.peerList[index].passenger_cardno"
        />
        <van-field autosize readonly input-align="right"
          :label="'同行人手机号码'+(index+1)"
          v-model="formData.peerList[index].passenger_tel"
        />
        <div class='field'>
          <div class='label'>是否途经风险地区</div>
          <div class='text'>
            <div :class="{'icon': formData.peerList[index].quguo_high_risk == '1', 'icon1': formData.peerList[index].quguo_high_risk == '2'}"></div>
            <div :class="{'value': formData.peerList[index].quguo_high_risk == '1', 'value1': formData.peerList[index].quguo_high_risk == '2'}">
              {{ formData.peerList[index].quguo_high_risk == '1' ? '未途经' : formData.peerList[index].quguo_high_risk == '2' ? '途经' : formData.peerList[index].quguo_high_risk == '3' ? '未查询到行程记录' : ''}}
            </div>
          </div>
        </div>
        <van-field autosize readonly input-align="right"
                   label="最新核酸检测结果"
                   v-model="formData.peerList[index].hesuan_result1"
        />
      </div>
      <!--<div class='czInfo'>-->
      <!--  <div>清单信息</div>-->
      <!--</div>-->
      <!--<div class="title" v-if="formData.coldchainList[0].jck_qd.length > 0">进出口清单</div>-->
      <!--<div class="img_list">-->
      <!--  <div @click="preview(item)" v-for="item in formData.coldchainList[0].jck_qd" :key="item"><img :src="item" alt=""></div>-->
      <!--</div>-->
      <!--<div class="title" v-if="formData.coldchainList[0].jck_jyzm.length > 0">进出口检疫检验证明</div>-->
      <!--<div class="img_list">-->
      <!--  <div @click="preview(item)" v-for="item in formData.coldchainList[0].jck_jyzm" :key="item"><img :src="item" alt=""></div>-->
      <!--</div>-->
      <!--<div class="title" v-if="formData.coldchainList[0].hs_zm.length > 0">核酸检测证明</div>-->
      <!--<div class="img_list">-->
      <!--  <div @click="preview(item)" v-for="item in formData.coldchainList[0].hs_zm" :key="item"><img :src="item" alt=""></div>-->
      <!--</div>-->
      <!--<div class="title" v-if="formData.coldchainList[0].xs_zm.length > 0">消杀证明</div>-->
      <!--<div class="img_list">-->
      <!--  <div @click="preview(item)" v-for="item in formData.coldchainList[0].xs_zm" :key="item"><img :src="item" alt=""></div>-->
      <!--</div>-->
    </van-form>
  </div>
</template>

<script>
import { getCargoTransportationInfoByCode } from '../../api/gov/home/index'
import { ImagePreview } from 'vant'
import { areaList } from '@vant/area-data'
export default {
  name: 'detail',
  components: {},
  props: {},
  data () {
    return {
      formData: {},
      areaList,
      categoryArr: [
        {
          value: '1',
          lable: '体温正常'
        },
        {
          value: '2',
          lable: '体温异常'
        }
      ],
      categoryArr1: [
        {
          value: '1',
          lable: '冷链'
        },
        {
          value: '2',
          lable: '非冷链'
        }
      ],
      categoryArr3: [ // 车两类别
        {
          value: '1',
          lable: '小型轿车'
        },
        {
          value: '2',
          lable: '客运车辆'
        },
        {
          value: '3',
          lable: '货车'
        },
        {
          value: '4',
          lable: '特种车辆'
        }
      ],
      projectListArr: [
        {
          value: '1',
          lable: '蓝色'
        },
        {
          value: '2',
          lable: '黄色'
        },
        {
          value: '3',
          lable: '黑色'
        },
        {
          value: '4',
          lable: '白色'
        },
        {
          value: '5',
          lable: '绿色'
        },
        {
          value: '9',
          lable: '其他'
        }
      ],
      leaveTimeArr: [
        {
          value: '1',
          lable: '当天离沈'
        },
        {
          value: '2',
          lable: '在沈过夜'
        },
        {
          value: '3',
          lable: '空车返沈'
        }

      ],
      columns: [
        {
          'code': 'LM00001',
          'name': '和平区'
        },
        {
          'code': 'LM00002',
          'name': '沈河区'
        },
        {
          'code': 'LM00003',
          'name': '大东区'
        },
        {
          'code': 'LM00004',
          'name': '皇姑区'
        },
        {
          'code': 'LM00005',
          'name': '铁西区'
        },
        {
          'code': 'LM00006',
          'name': '浑南区'
        },
        {
          'code': 'LM00007',
          'name': '于洪区'
        },
        {
          'code': 'LM00008',
          'name': '沈北新区'
        },
        {
          'code': 'LM00009',
          'name': '苏家屯区'
        },
        {
          'code': 'LM00010',
          'name': '辽中区'
        },
        {
          'code': 'LM00011',
          'name': '康平县'
        },
        {
          'code': 'LM00012',
          'name': '法库县'
        },
        {
          'code': 'LM00013',
          'name': '新民市'
        }
      ]
    }
  },
  watch: {},
  created () {},
  mounted () {
    getCargoTransportationInfoByCode({ register_code: this.$route.query.registerCode }).then(res => {
      console.log('详情数据', res.data.data)
      // const fr = ['jck_qd', 'jck_jyzm', 'hs_zm', 'xs_zm']
      // fr.forEach(i => {
      //   if (!res.data.data.coldchainList[0][i]) return
      //   if (res.data.data.coldchainList[0][i].indexOf(',') === -1) {
      //     res.data.data.coldchainList[0][i] = [res.data.data.coldchainList[0][i]]
      //   } else {
      //     res.data.data.coldchainList[0][i] = res.data.data.coldchainList[0][i].split(',')
      //   }
      // })
      // 车辆类别
      if (res.data.data.cheliang_type) {
        res.data.data.cheliang_type_name = this.categoryArr3.find(e => e.value == res.data.data.cheliang_type).lable // 车辆类别
      }
      if (res.data.data.chepai_color) {
        res.data.data.chepai_color_name = this.projectListArr.find(e => e.value == res.data.data.chepai_color).lable // 车牌颜色
      }
      if (res.data.data.zssj) {
        res.data.data.zssj_name = this.leaveTimeArr.find(e => e.value == res.data.data.zssj).lable // 在沈时间
      }
      if (res.data.data.dsq) {
        res.data.data.dsqName = this.columns.find(e => e.code == res.data.data.dsq).name // 到沈区域
      }
      if (res.data.data.hesuan_result && res.data.data.hesuan_detail) {
        res.data.data.hesuan_result1 = res.data.data.hesuan_result + '(' + res.data.data.hesuan_detail + ')'
      } else {
        res.data.data.hesuan_result1 = '国家核酸检测接口请求失败'
      }
      res.data.data.origin = ''
      for (let i in this.areaList.province_list) {
        if (res.data.data.cfd_s == i) {
          res.data.data.origin = this.areaList.province_list[i]
        }
      }
      for (let i in this.areaList.city_list) {
        if (res.data.data.cfd_city == i) {
          res.data.data.origin = res.data.data.origin + ',' + this.areaList.city_list[i]
        }
      }
      res.data.data.peerList.map((v) => {
        if (v.hesuan_result && v.hesuan_detail) {
          v.hesuan_result1 = v.hesuan_result + '(' + v.hesuan_detail + ')'
        } else {
          v.hesuan_result1 = '国家核酸检测接口请求失败'
        }
        return v
      })
      // res.data.data.goodsList.map((v) => {
      //   if (v.ascription_code) {
      //     v.ascription_code_name = this.columns.find(e => e.code == v.ascription_code).name
      //   }
      // })
      this.formData = res.data.data
    })
  },
  computed: {},
  methods: {
    preview (img) {
      ImagePreview([img])
    }
  }
}
</script>
<style lang="less" scoped>
.detail{
  .title{
    padding: 0.533rem 0.853rem;
    font-size: 0.747rem;
  }
  /deep/.van-field__label{
    width: 9em;
  }
  .img_list{
    margin: 20px 0.853rem;
    display: flex;
    img{
      width: 120px;
      height: 120px;
      margin-right: 20px;
    }
  }
}
.czInfo{
  height: 80px;
  font-size: 32px;
  //font-weight: bold;
  //color: white;
  //background-color: #58be6a;
  background-color: #eee;
  display: flex;
  align-items: center;
  div{
    width: 690px;
    margin: 0 auto;
  }
}
.field{
  width: 690px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ebedf0;
  margin: 0 auto;
  box-sizing: border-box;
  .label{
    font-size: 28px;
    color: #646566;
    flex-shrink: 0;
  }
  .text{
    font-size: 28px;
    color: #646566;
    display: flex;
    align-items: center;
    .icon{
      width: 15px;
      height: 15px;
      border-radius: 15px;
      background-color: #58be6a;
      flex-shrink: 0;
      margin-right: 5px;
    }
    .icon1{
      width: 15px;
      height: 15px;
      border-radius: 15px;
      flex-shrink: 0;
      background-color: red;
      margin-right: 5px;
    }
    .value{
      color: #58be6a;
    }
    .value1{
      color: red;
    }
  }
}
.promptView{
    width: 690px;
    margin: 0 auto;
    font-size: 28px;
    color: #aaa;
    text-indent: 14px;
    box-sizing: border-box;
    padding: 20px 0;
    border-bottom: 1px solid #ebedf0;
  }
</style>
